<template>
  <div class="cardCationer">
    <div class="header">
      <span class="title">购物车</span>
      <div class="right">
        <div class="arch">领券</div>
        <span
          class="edit"
          v-if="goodsList.length >= 1 && !isDelete"
          @click="goDelete"
          >编辑</span
        >
        <span class="edit" v-if="isDelete" @click="goEdit">完成</span>
      </div>
    </div>
    <div class="full" v-if="isFull">
      <span>自营仓商品，已满99元免邮</span>
    </div>
    <div class="service" v-else>
      <div class="s_item">
        <div class="O">。</div>
        <span class="serves">30天无忧退货</span>
      </div>
      <div class="s_item">
        <div class="O">。</div>
        <span class="serves">48小时快速退款</span>
      </div>
      <div class="s_item">
        <div class="O">。</div>
        <span class="serves">满99元免邮费</span>
      </div>
    </div>

    <div class="background_img" @click="toHome" v-if="!goodsList.length >= 1">
      <img src="../../assets/images/tsshopcard.webp" alt="" />
      <span>去添加点什么吧</span>
    </div>
    <div class="goodsList">
      <div class="goodsitem" v-for="goodsitem in goodsList" :key="goodsitem.id">
        <i
          class="iconfont icon-31xuanzhong"
          :class="{ active: goodsitem.isChecked == 1 }"
          @click="checkedGoods(goodsitem)"
        ></i>
        <div class="right">
          <div class="top">
            <img :src="goodsitem.imgUrl" alt="" />
            <div class="goodsDetail">
              <span class="goodsname">{{ goodsitem.skuName }}</span>
              <div class="SPEC">
                <span class="spec">选择型号参数</span
                ><i class="iconfont icon-xiajiantou"></i>
              </div>

              <div class="goods_price">
                <span>￥{{ goodsitem.skuPrice }}</span>
                <div class="countCtrl">
                  <van-stepper
                    v-model="goodsitem.skuNum"
                    button-size="26px"
                    integer
                    disable-input
                    @plus="changeNum(1, goodsitem.skuId)"
                    @minus="changeNum(-1, goodsitem.skuId)"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="bottom test">
            <i class="iconfont icon-zhuye"></i>
            <span>自营仓商品满99免邮</span>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="left">
        <div>
          <i
            class="iconfont icon-31xuanzhong"
            :class="{ active: isAllChecked }"
            @click="checkedAllGoods"
          ></i>
          <span class="ischecked">已选（{{ checkedNum }}）</span>
        </div>
        <div class="allmoney" v-show="!isDelete">
          合计：￥{{ checkedAllMoney }}
        </div>
      </div>
      <div class="right" v-if="isDelete" @click="deleteGoods">删除所选</div>
      <div class="right" v-else>下单</div>
    </div>
  </div>
</template>

<script>
import { Dialog, Toast } from "vant";
import { mapState } from "vuex";
export default {
  name: "Cart",
  data() {
    return {
      value: 0,
      isDelete: false,
    };
  },
  mounted() {
    let token = localStorage.getItem("token_key");
    if (!token) {
      this.$router.push({ name: "center" });
      Toast("请先登录");
    } else {
      this.getShopList();
    }
  },
  methods: {
    // 获取购物车列表
    getShopList() {
      this.$store.dispatch("getShopData");
    },
    // 点击跳转主页
    toHome() {
      this.$router.push({ name: "home" });
    },
    // 点击修改商品数量
    changeNum(num, id) {
      // console.log(num, value);
      this.$store.dispatch("setGoodsNum", { id, num });
    },
    // 点击是否选中商品
    checkedGoods(goods) {
      if (goods.isChecked == 1) {
        goods.isChecked = 0;
        if (!this.isDelete) {
          this.$store.dispatch("setGoodsChecked", {
            id: goods.skuId,
            isChecked: goods.isChecked,
          });
        }
      } else if (goods.isChecked == 0) {
        goods.isChecked = 1;
        if (!this.isDelete) {
          this.$store.dispatch("setGoodsChecked", {
            id: goods.skuId,
            isChecked: goods.isChecked,
          });
        }
      }
    },
    // 点击选中所有
    checkedAllGoods() {
      let ischecked = this.isAllChecked ? 0 : 1;
      this.goodsList.forEach((item) => {
        item.isChecked = ischecked;
      });
    },
    // 点击切换编辑状态
    goDelete() {
      this.isDelete = true;
      this.goodsList.forEach((item) => (item.isChecked = 0));
    },
    // 点击删除选中的商品
    async deleteGoods() {
      let index = this.goodsList.findIndex((item) => item.isChecked == 1);

      if (index !== -1) {
        Dialog.confirm({
          title: "提示",
          message: `确定要删除吗?`,
        })
          .then(() => {
            this.goodsList.forEach((item) => {
              if (item.isChecked == 1) {
                this.$store.dispatch("deleteGoods", item.skuId).then((res) => {
                  res == "ok" && Toast("删除成功");
                  let id = item.id;
                  let index = this.goodsList.findIndex(
                    (item) => id === item.id
                  );
                  this.goodsList.splice(index, 1);
                });
              }
            });
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    // 编辑后点击完成
    goEdit() {
      this.isDelete = false;
    },
  },
  computed: {
    ...mapState({
      goodsList: (state) => state.card.shopData,
    }),
    // 是否已满
    isFull() {
      return (
        this.goodsList &&
        99 <
          this.goodsList.reduce((prov, item) => {
            prov += item.skuNum * item.skuPrice * 1;
            return prov;
          }, 0)
      );
    },
    // 已选几项
    checkedNum() {
      return (
        this.goodsList &&
        this.goodsList.reduce((prov, item) => {
          if (item.isChecked == 1) {
            prov += 1;
          }
          return prov;
        }, 0)
      );
    },
    // 合计
    checkedAllMoney() {
      return (
        this.goodsList &&
        this.goodsList.reduce((prov, item) => {
          if (item.isChecked == 1) {
            prov += item.skuNum * item.skuPrice * 1;
          }
          return prov;
        }, 0)
      );
    },
    // 是否全部选中
    isAllChecked() {
      return (
        this.goodsList && this.goodsList.every((item) => item.isChecked == 1)
      );
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../assets/font/resetcss.css");
.cardCationer {
  background-color: #f4f4f4;
  height: 100vh;
  .header {
    height: 44px;
    display: flex;
    position: fixed;
    top: 0;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 0px 15px;
    background-color: white;
    border-bottom: 1px solid rgba(170, 170, 170, 0.363);
    .title {
      font-size: 18px;
    }
    .right {
      display: flex;
      .arch {
        position: relative;
        color: white;
        font-size: 12px;
        padding: 2px 6px;
        background-image: linear-gradient(-45deg, #fc865f 0, #fc625f 100%);
        &::after {
          content: "";
          position: absolute;
          width: 8px;
          height: 8px;
          top: calc(50% - 4px);
          right: -4px;
          background-color: white;
          border-radius: 50%;
        }
        &::before {
          content: "";
          position: absolute;
          width: 8px;
          height: 8px;
          top: calc(50% - 4px);
          left: -4px;
          background-color: white;
          border-radius: 50%;
        }
      }
      .edit {
        padding-left: 15px;
      }
    }
  }
  .service {
    margin-top: 44px;
    display: flex;
    padding: 0px 15px;
    font-size: 12px;
    justify-content: space-between;
    .s_item {
      height: 40px;
      line-height: 40px;
      position: relative;
      .O {
        position: absolute;
        color: #ccc;
        top: 50%;
        left: 0;
        margin-top: -25px;
        height: 40px;
        width: 10px;
        font-size: 20px;
      }
      .serves {
        font-size: 12px;
        margin-left: 10px;
      }
    }
  }
  .full {
    margin-top: 44px;
    padding: 0px 15px;
    height: 40px;
    background-color: #fff8d8;
    font-size: 15px;
    color: #f48f18;
    line-height: 40px;
  }
  .background_img {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50%;
    img {
      width: 124px;
      height: 124px;
    }
    span {
      font-size: 14px;
      color: #aaa;
    }
  }
  .goodsList {
    padding-bottom: 100px;
    .goodsitem {
      width: 100%;
      display: flex;
      align-items: center;
      height: 137px;
      background-color: white;
      padding-left: 15px;

      .icon-31xuanzhong {
        font-size: 22px;
        color: white;
        border: 1px solid #d1d1d1;
        border-radius: 50%;
        margin-right: 10px;
        margin-top: -30px;
        &.active {
          color: #da1a23;
        }
      }
      .right {
        .top {
          display: flex;
          height: 110px;
          padding: 12px 15px 0px 0px;
          img {
            width: 86px;
            height: 86px;
          }
          .goodsDetail {
            .goodsname {
              height: 36px;
              width: 221px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
            .SPEC {
              display: flex;
              margin: 5px 0px 2px 0px;
              align-items: center;
              justify-content: space-between;
              width: 191px;
              padding-left: 5px;
              background-color: whitesmoke;
              border: 1px solid #e4e4e4;
              color: #aaa;
              .spec {
                width: 163px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
                font-size: 12px;
              }
              .icon-xiajiantou {
                font-weight: 600;
                padding-right: 5px;
              }
            }

            .goods_price {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .countCtrl {
                border: 1px solid #dadada;
              }
            }
          }
        }
      }
      .bottom {
        widows: 100%;
        border-bottom: 1px solid #f4f4f4;
        padding-bottom: 10px;
        .icon-zhuye {
          font-size: 5px;
          color: #75a7e4;
          font-weight: 600;
        }
        span {
          font-size: 12px;
          color: #aaa;
          margin-left: 5px;
        }
      }
    }
  }
  .footer {
    display: flex;
    position: fixed;
    bottom: 50px;
    justify-content: space-between;
    .left {
      display: flex;
      flex-shrink: 0;
      width: 262px;
      height: 59px;
      padding: 0 10px 0 35px;
      justify-content: space-between;
      align-items: center;
      background-color: white;
      border-bottom: 1px solid #dbd9d9;
      .icon-31xuanzhong {
        position: absolute;
        font-size: 22px;
        color: white;
        border: 1px solid #d1d1d1;
        border-radius: 50%;
        left: 15px;
        &.active {
          color: #da1a23;
        }
      }
      .ischecked {
        margin-left: 7px;
        color: #aaa;
      }
      .allmoney {
        color: #da1a23;
      }
    }
    .right {
      width: 113px;
      height: 59px;
      background-color: red;
      color: white;
      text-align: center;
      line-height: 59px;
    }
  }
}
.tabbar {
  position: fixed;
  bottom: 0;
}
</style>
